<template>
  <a-layout-footer style="text-align: center">
    开发喵知识库 {{ loginUser.name }}
  </a-layout-footer>
</template>

<script>
import { computed,ref } from 'vue'
import store from "@/store/index.js";
import {Tool} from "@/util/tool.ts";
import { notification } from 'ant-design-vue';

export default {
  name: "the-footer",
  setup(){
    const loginUser = computed(() => { return store.state.loginUser});

    const websocket = ref(), token = ref();

    const onOpen = () => {
      console.log("websocket 连接成功, 状态码：" + websocket.value.readyState);
    };

    const onMessage = (event) => {
      console.log("websocket 接收到消息： " + event.data);
      notification['success']({
        message: '收到新消息',
        description: event.data,
      });
    };

    const onError = () => {
      console.log("websocket 连接错误, 状态码：" + websocket.value.readyState);
    };

    const onClose = () => {
      console.log("websocket 关闭连接, 状态码：" + websocket.value.readyState);
    };

    const initWebSocket = () =>{
      websocket.value.onopen = onOpen;
      websocket.value.onmessage = onMessage;
      websocket.value.onerror = onError;
      websocket.value.onclose = onClose;
    };
    return {
      loginUser,
      websocket,
      token,
      initWebSocket
    }
  },
  mounted() {
    if ('WebSocket' in window) {
      this.token = Tool.uuid();
      this.websocket = new WebSocket(import.meta.env.VITE_APP_WS_SERVER + "/ws/" + this.token);
      this.initWebSocket();
    } else{
      console.error("当前浏览器不支持 WebSocket");
    }
  }
}
</script>

<style scoped>

</style>